
<template>
  <div class="rent-contract component actWrap">
    <div class="Li">
      <div class="Li-item" >
        <div class="Li-item-i">
          <div class="i">
            <h4 class="i-left">
              <img class="avatar" :src="avatarUrl" alt="" >
              <span class="l-title">{{items.trueName}}</span> 
            </h4>
            <h4 class="i-status">{{status2txt(items.status)}}</h4>
          </div>
        </div>
        <house-list v-if="items.housePerson" :houseInfo="items.housePerson" :detailPath="+items.houseType === 2 ? '/apartmentDetail' : '/detail'" class="contract-house">
        </house-list>
        <div class="txt-describe">
          <p class="clearfix"><span>合同编号:</span><span class="f-r">{{items.contractNo}}</span></p>
          <p class="clearfix"><span>签约时间:</span><span class="f-r">{{items.createTimeStr | IOSformatDate(items.beginTime, '/')}}</span></p>
          <p class="clearfix"><span>租赁日期:</span><span class="f-r">{{items.startTimeStr | IOSformatDate(items.beginTime, '/')}} - {{items.endTimeStr | IOSformatDate(items.beginTime, '/')}}</span></p>
        </div>
        <div class="bt-container">
          <div v-if="status==0">
            <x-button  @click.native="toContractDetail(items.id)"  class="theme-bt bt-c" mini>详情</x-button>
            <x-button  @click.native="toContractOk(items.id)" class="theme-bt bt-t"  mini>确认合同</x-button>
          </div>
          <div v-else-if="status==1">
            <x-button  @click.native="toContractDetail(items.id)"  class="theme-bt bt-c" mini>详情</x-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import contractList from '@/components/contractList'
import noData from '@/components/noData'
import houseList from '@/components/houseList'
// import contract from '@/components/contract'
export default {
  components: {
    // contractList,
    noData,
    houseList
  },
  props: {
    items: {},
    status: Number
  },
  data () {
    return {
      items2: {},
      showDialog: false,
      contractTab: 0,
      msg: {0: '', 1: '', 2: ''},
      contractList: {0: [], 1: [], 2: []},
      conList: [],
      itemList: [], // 判读记录数
      dataUpdated: false,
      userInfo: JSON.parse(window.localStorage.getItem('userInfo') || '{}'),
      avatarUrl: ''
    }
  },
  watch: {
    items (value) {
      this.avatarUrl = this.items.headImgUrl ? this.items.headImgUrl : require('../../../images/avatar_default.png')
      let {houseTitle, communityName: address, isBet: isFreeDeposit, coverImg, rentalPrice, highlights, houseId: id} = this.items
      this.items.housePerson = {houseTitle, address, coverImg, rentalPrice, highlights, id, isFreeDeposit}
    }
  },
  created () {
    this.avatarUrl = this.items.headImgUrl ? this.items.headImgUrl : require('../../../images/avatar_default.png')
    let {houseTitle, communityName: address, isBet: isFreeDeposit, coverImg, rentalPrice, highlights, houseId: id} = this.items
    this.items.housePerson = {houseTitle, address, coverImg, rentalPrice, highlights, id, isFreeDeposit}
  },
  methods: {
    status2txt (status) {
      if (status === 1 && this.items.isContinue === 2) return '租房合同'
      else if (this.items.isContinue === 1) return '续租合同'
      else if (status === 2) return '租房合同'
      else if (status === 3) return '合同过期'
      else if (status === 4) return '退租合同'
      else if (status === 5) return '已退租'
      else return ''
    },
    // 详情
    toContractDetail: function (contractId) {
      this.$emit('clickdetails', contractId)
    },
    // 确认合同
    toContractOk (contractId) {
      let that = this
      this.$vux.confirm.show({
        title: '提示',
        content: `是否确定合同？`,
        onConfirm () {
          if (that.items.status === 1 || that.items.status === 2) {   // 签约合同,续租合同
            console.log('aaa')
            that.$axiosPosting(that.$api.updateNewContractByStatus, { id: contractId }).then(res => {
              if (res.code === '0000') {
                that.$emit('getData', '1')
              } else {
                alert('合同确认失败！')
              }
            })
          } else if (that.items.status === 4) {    // 确认退租合同
          // landlordId: that.userInfo.id
            that.$axiosPosting(that.$api.confirmToApplyFor, { contractId: contractId }).then(res => {
              if (res.code === '0000') {
                console.log('成功')
                that.$emit('getData', '1')
              } else {
                alert('合同确认失败！')
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

  .bt-t {
    background-color: #fff !important;
    border: 1px solid #666 !important;
    color: #666 !important;
  }

  .rent-contract{
    // padding-top: 44px;
    font-size: .75rem;
    background: #fff;
    .vux-tab {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    }
    .contract-list{
      background: #f4f4f4;
      // height: ~"calc(100vh - 244px)";
      box-sizing: border-box;
      overflow: auto;
      .btn-group {
        padding-top: .4rem;
        margin-top: .5rem;
        font-size: 0;
        text-align: right;
        border-top: 1px solid #DADADA;
        .theme-bt {
          width: 3.5rem;
          margin-top: 0;
          margin-left: .5rem;
          padding: 0;
          font-size: 13px;
          line-height: 1.5rem;
        }
        .bt-c {
          color: #d4323f;
          border-color: #d4323f;
        }
        .bt-g {
          color: #777;
          border: 1px solid #999;
          background: #fff;
        }
      }
      .tips {
        font-size: 15px;
        line-height: 3rem;
        color: #999;
        text-align: center;
        background: #fff;
      }
    }
  }
</style>
<style lang="less" scoped>
.Li{
  .bt-up {
    bottom: 40px;
    // padding-left: 0
    // padding-right: 0;
  }
  // .Li-item:last-child{
  //   border-bottom: 0;
  // }
  .Li-item{
    position: relative;
    // border-bottom: 0.3rem;
    border-bottom: 6px solid #f4f4f4;
    .bt-container{
      text-align: right;
      padding: 16px;
    }
    .Li-item-i{
      display: flex;
      font-size: 12px;
      align-items: center;
      border-bottom: 0.5px solid #f4f4f4;
      .time {
        font-size: 12px;
      }
      .i{
        padding: 12px 10px;
        display: flex;
        flex-wrap: wrap;
        .i-left{
          width: 100%;
          padding-right: .5rem;
          line-height: 1rem;
          line-height: 20px;
          .l__title {
            color: #333;
            font-size: 13px;
          }
        }
        .i-button {
          color: #989898;
          line-height: 24px;
          span:nth-of-type(2) {
            padding-left: 1rem;
          }
        }
      }
      .i-status{
        position: absolute;
        // top: 10px;
        padding-top: 1px;
        font-size: 14px;
        right: 0.65rem;
        line-height: 18px;
        text-align: center;
        color: #007eff;
      }
    }
  }
}
.tip {
  margin-top: 0px;
  padding: 14px 20px 0 32px;
  font-size: 13px;
  line-height: 1.8;
  position: relative;
  color: #999;
  padding-bottom: 12px;
  background: white;
  opacity: 0;
  transition: all 3s;
  text-align: justify;
 .weui-icon-warn {
    font-size: 18px;
    color: #ff8a00;
    position: absolute;
    left: 3px;
    top: 16px;
  }
}
.dockBottom {
  position: absolute;
  bottom: 0;
  background: white;
  box-sizing: border-box;
  opacity: 1;
}
.visible {
  opacity: 1;
}
.contract-house {
  // padding-left: 18px;
  background: #f8f8f8;
}
.txt-describe {
  padding: 7px 18px 0;
  span {
    float: left;
    display: inline-block;
    font-size: 12px;
    color: #777;
    line-height: 20px;
  }
  .f-r {
    float: right;
    color: #333;
  }
}
.bt-c {
  line-height: 29px;
}
.bt-red {
  color: #d4323f;
  border: 1px solid #d4323f;
}
.weui-btn_mini {
  padding: 0 30px;
  font-size: 12px;
}
.weui-btn {
  margin: 6px 0 0 5px;
}
.avatar { 
  margin: 0 7px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
}

</style>



<style lang="less" scoped>

  .OrderForRenter-ong{
    float: right;
    margin-top: 13px;
    padding: 0 10px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ff9600;
    color: #fff;
    height: 23px;
    line-height: 24px;
  }
  .btn-up {
    margin-left: 10px;
    color: #ff9600;
  }
  .tip {
    font-size: 13px;
  }
  .btn-gray {
    border: 1px solid #777777;
    color: #777777;
    background: white;
  }
  .li-zkdd {
    font-size: .7rem;
    border-bottom: 6px solid #F3F3F3;
    .status {
      padding: 0 18px;
      height: 1.8rem;
      line-height:  1.8rem;
      border-bottom: 1px solid #F3F3F3;
      .right {
        float: right;
        img {
          height: .7rem;
          position: relative;
          top: .1rem;
        }
      }
    }
  }
  .btn-container {
    position: relative;
    height: 52px;
    padding-right: 15px;
    &:before {
      content: '';
      position: absolute;
      bottom: 53px;
      left: 0;
      right: 0;
      border-bottom: 1px solid #F3F3F3;
    }
  }
</style>
<style lang="less">
/*
.vux-x-dialog{
position: relative;
}
.OrderForRenter {
  .house {
    padding: 18px 18px 16px 0;
    
  }
  .label {
    span:nth-child(3) {
      display: none;
    }
    @media screen and (max-width: 350px) {
      span:nth-child(2) {
        display: none;
      }
    }
  }
  .tips-dialog {
    height: 100%;
    .header {
      padding: 30px 0 20px;
      font-size: 24px;
      line-height: 1;
      color: #000;
    }
    .body {
      padding: 0 15px 15px;
      p {
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.6;
        color: #777;
        text-align: left;
      }
      .weui-btn {
        margin-top: 20px;
      }
    }
  }
  .tips-dialog, .confirm-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .btn-close {
      position: absolute;
      // bottom: -60px;
      top: 1rem;
      right:1rem;
      width: 1.8rem;
      height: 1.8rem;
      margin-left: -0.9rem;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
      z-index: 9999;
    }
  }
}
*/
</style>
